<template>
  <div class="food-detail" ref="detail" >
    <div class="food-content">
      <div class="img-wapper">
        <img class="image" :src="food.image" alt="food.name">
        <div class="back" @click="close">
          <i class="icon-arrow_lift"></i>
        </div>
      </div>
      <div class="content">
        <h1 class="title">{{food.name}}</h1>
        <div class="detail">
          <span class="count">月售{{food.sellCount}}份</span>
          <span class="rating">好评率{{food.rating}}%</span>
        </div>
        <div class="price">
          <span class="now"><span class="money">￥</span>{{food.price}}</span>
          <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
        </div>
        <div class="cartcontrol-wapper">
          <cart-control :food="food" @add="controlAdd"></cart-control>
        </div>
        <transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
          <div class="buy" @click="addFirst($event)" v-show="showBuy">加入购物车</div>
        </transition>
      </div>
      <port-split></port-split>
      <div class="info">
        <h1 class="title">商品介绍</h1>
        <p class="text">{{food.info || '暂无介绍'}}</p>
      </div>
      <port-split></port-split>
      <div class="rating">
        <h1 class="title">商品评价</h1>
        <rating-select @select="select" @toggleOnly="toggleOnly" :ratings="food.ratings" :selectType="selectType" :onlyContent="onlyContent" :desc="desc"></rating-select>
        <div class="rating-wapper">
          <ul v-show="food.ratings && food.ratings.length">
             <transition-group :duration="800" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
              <li v-show="needShow(rating.rateType, rating.text)" v-for="rating of food.ratings" :key="rating.username" class="rating-item">
                <div class="user">
                  <span class="username">{{rating.username}}</span>
                  <img :src="rating.avatar" alt="rating.username" class="avatar" width="12px" height="12px">
                </div>
                <div class="time">{{rating.rateTime | formatDate('yyyy-MM-dd hh:mm')}}</div>
                <p class="text">
                  <span :class="{'icon-thumb_up':rating.rateType === 0, 'icon-thumb_down':rating.rateType === 1}"></span>{{rating.text}}
                </p>
              </li>
             </transition-group>
          </ul>
          <div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import CartControl from 'common/cartcontrol/CartControl'
import PortSplit from 'common/split/PortSplit'
import RatingSelect from 'common/ratingselect/RatingSelect'
import { formatDate } from '@/assets/js/tools'

const ALL = 2
// const POSITIVE = 1
// const NEGATIVE = 2

export default {
  name: 'FoodDetail',
  components: {
    CartControl,
    PortSplit,
    RatingSelect
  },
  props: {
    food: {
      type: Object
    },
    showDetail: {
      type: Boolean
    }
  },
  data () {
    return {
      desc: {
        all: '全部',
        positive: '推荐',
        negative: '吐槽'
      },
      selectType: ALL,
      onlyContent: false
    }
  },
  created () {
    this.$nextTick(() => {
      this.initScroll()
    })
  },
  computed: {
    showBuy () {
      return !this.food.count || this.food.count === 0
    }
  },
  methods: {
    close () {
      this.$emit('hideDetail')
    },
    initScroll () {
      if (!this.foodScroll) {
        this.foodScroll = new BScroll(this.$refs.detail, {
          click: true
        })
      }
      this.selectType = ALL
      this.onlyContent = false
    },
    addFirst (e) {
      let evt = window.event || e
      this.$set(this.food, 'count', 1)
      this.$emit('add', evt.target)
    },
    controlAdd (target) {
      this.$emit('add', target)
    },
    select (type) {
      this.selectType = type
    },
    toggleOnly () {
      this.onlyContent = !this.onlyContent
    },
    needShow (type, text) {
      if (this.onlyContent && !text) {
        return false
      }
      if (this.selectType === ALL) {
        return true
      } else {
        return type === this.selectType
      }
    }
  },
  filters: {
    formatDate (time, fmt) {
      let date = new Date(time)
      return formatDate(date, fmt)
    }
  }
}
</script>

<style scoped lang="stylus">
.food-detail
  position: fixed;
  top 0
  left 0
  bottom .96rem
  background-color #fff
  z-index 0
  width 100%
  overflow hidden
  .img-wapper
    width 100%
    height 0
    position relative
    padding-bottom 100%
    .image
      position absolute
      top 0
      left 0
      width 100%
      height 100%
    .back
      position: absolute
      top .3rem
      left 0
      .icon-arrow_lift
        font-size .4rem
        color #fff
        padding .2rem
  .content
    padding .36rem
    position relative
    .title
      font-size .28rem
      line-height .28rem
      margin-bottom .16rem
      font-weight 700
      color rgb(7, 17, 27)
    .detail
      margin-bottom .36rem
      line-height .2rem
      font-size 0
      .count,.rating
        font-size .2rem
        color rgb(147, 153, 159)
      .count
        margin-right .24rem
    .price
      font-weight 700
      line-height .48rem
      font-size 0
      .now
        font-size .28rem
        color rgb(240, 20, 20)
        margin-right .2rem
        .money
          font-size .2rem
          font-weight 200
      .old
        font-size .2rem
        text-decoration line-through
        color rgb(147, 153, 159)
  .cartcontrol-wapper
    position absolute
    right .24rem
    bottom .24rem
  .buy
    position absolute
    right .36rem
    bottom .36rem
    height .48rem
    line-height .48rem
    border-radius .24rem
    padding 0 .24rem
    box-sizing border-box
    font-size .2rem
    color #fff
    background-color rgb(0, 160, 220)
  .info
    padding .36rem
    font-weight 200
    .title
      font-size .28rem
      margin-bottom .12rem
      line-height .28rem
      color rgb(7, 17, 27)
    .text
      font-size .24rem
      line-height .48rem
      color rgb(77, 85, 93)
      padding 0 .16rem
  .rating
    padding-top .36rem
    .title
      line-height .28rem
      margin-left .36rem
      font-size .28rem
      color: rgb(7, 17, 27)
    .rating-wapper
      padding 0 .36rem
      .rating-item
        position relative
        padding .32rem 0
        font-size 0
        border-bottom .02rem solid rgba(7, 17, 27 , 0.1)
        &:last-child
          border none
        .user
          position absolute
          top .32rem
          right 0
          font-size .2rem
          color rgb(147, 153, 159)
          line-height .24rem
          vertical-align top
          .avatar
            border-radius 50%
        .time
          font-size .20rem
          color rgb(147, 153, 159)
          line-height .24rem
          margin-bottom .12rem
        .text
          font-size .24rem
          color rgb(7, 17, 27)
          line-height .32rem
          .icon-thumb_up,.icon-thumb_down
            margin-right .08rem
            line-height .48rem
          .icon-thumb_up
            color rgb(0, 160, 220)
          .icon-thumb_down
            color rgb(147, 153, 159)
      .no-rating
        padding .32rem 0
        font-size .24rem
        color rgb(147, 153, 159)
</style>
